﻿@*******************************************************************************************************
    //  Home.cshtml - Gbtc
    //
    //  Copyright © 2016, Grid Protection Alliance.  All Rights Reserved.
    //
    //  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
    //  the NOTICE file distributed with this work for additional information regarding copyright ownership.
    //  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
    //  file except in compliance with the License. You may obtain a copy of the License at:
    //
    //      http://opensource.org/licenses/MIT
    //
    //  Unless agreed to in writing, the subject software distributed under the License is distributed on an
    //  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
    //  License for the specific language governing permissions and limitations.
    //
    //  Code Modification History:
    //  ----------------------------------------------------------------------------------------------------
    //  01/22/2016 - J. Ritchie Carroll
    //       Generated original version of source code.
    //
    //*****************************************************************************************************@
@using GSF.Collections;
@using GSF.Data.Model
@using GSF.Web.Model
@using PQDashboard.Model
@using Newtonsoft.Json
@model AppModel
@{
    Layout = "";
    DataContext dataContext = Model.DataContext;
    string historianConnection = dataContext.Table<Settings>().QueryRecordWhere("Name = 'Historian.URL'")?.Value ?? "127.0.0.0";
    IEnumerable<MeterGroup> meterGroups = dataContext.Table<MeterGroup>().QueryRecordsWhere("ID IN (SELECT MeterGroupID FROM UserAccountMeterGroup WHERE UserAccountID IN (SELECT ID FROM UserAccount WHERE Name = {0}))", ViewBag.usersid);
    List<DeviceFilter> deviceFilters = dataContext.Table<DeviceFilter>().QueryRecords(restriction: new RecordRestriction("UserAccount = {0}", ViewBag.usersid)).ToList();
    List<SavedViews> savedViews = dataContext.Table<SavedViews>().QueryRecords("IsDefault DESC", new RecordRestriction("UserAccount = {0}", ViewBag.usersid)).ToList();
    if (!savedViews.FirstOrDefault()?.IsDefault ?? true)
    {
        savedViews.Insert(0, dataContext.Table<SavedViews>().QueryRecordWhere("UserAccount = 'Default' AND IsDefault = 'true'"));
    }
    int meterCount = dataContext.Connection.ExecuteScalar<int>("SELECT COUNT(*) FROM Meter WHERE ID IN (SELECT MeterID FROM MeterMeterGroup WHERE MeterGroupID IN (SELECT MeterGroupID FROM UserAccountMeterGroup WHERE UserAccountID =  (SELECT ID FROM UserAccount WHERE Name = {0})))", ViewBag.usersid);

    SavedViews defaultView = savedViews.First();

    string xdaInstance = dataContext.Connection.ExecuteScalar<string>("SELECT Value FROM DashSettings WHERE Name = 'System.XDAInstance'");
    string yearBegin = dataContext.Connection.ExecuteScalar<string>("SELECT Value FROM DashSettings WHERE Name = 'YearBeginDate'") ?? "January 1";

    int defaulMeterGroupID = -1;

    if (meterGroups.Any())
    {
        defaulMeterGroupID = meterGroups.First().ID;
    }

    string[] tabs = new[] { "Events", "Disturbances", "Faults", "Breakers","Extensions", "Trending", "Completeness", "Correctness" };
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Open PQ Dashboard :: @ViewBag.username</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta charset="utf-8"/>
    <meta http-equiv="cache-control" content="max-age=0" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="pragma" content="no-cache" />

    <link rel="shortcut icon" type="image/ico" href="~/favicon.ico" />
    @Styles.Render("~/Content/bootstrap/bootstrap")
    @Styles.Render("~/Content/primeui")
    @Styles.Render("~/Content/Default")
    <link rel="stylesheet" href="~/Content/daterangepicker.css"/>
    <link rel="stylesheet" type="text/css" href="~/Scripts/Leaflet/leaflet1.0.css"/>
    <script>
        var mg = @defaulMeterGroupID;
        var homePath = '@Html.Raw(Url.Content("~/"))';
        var historianConnection = '@historianConnection';
        var xdaInstance = '@xdaInstance';
        var yearBegin = '@yearBegin';
        var userId = '@ViewBag.usersid';
        var defaultView = JSON.parse('@Html.Raw(JsonConvert.SerializeObject(defaultView))');
        var userName = '@ViewBag.username';
    </script>
    @Scripts.Render("~/Scripts/jquery")
    @Scripts.Render("~/Scripts/bootstrap")
    @Scripts.Render("~/Scripts/random")
    @Scripts.Render("~/Scripts/PrimeUI/primeui")
    <script src="~/signalr/hubs"></script>
    @Scripts.Render("~/Scripts/default")
    @Scripts.Render("~/Scripts/others")
    @Scripts.Render("~/Scripts/D3/d3")
    @Scripts.Render("~/Scripts/Leaflet/leaflet")
    @Scripts.Render("~/Scripts/flot/flot")
    <script src="~/Scripts/ie11-compatibility-functions.js"></script>
</head>

<body>

<div style="visibility: hidden; width: 0px; height: 0px;" id="postedUserName">@ViewBag.usersid</div>

<div id="draggable" class="ui-widget-content"></div>
<div style="width: 100%; height: 36px;">
    <table width="100%">
        <tr>
            <td width="33%" align="left"><img src="~/Images/GPA-Logo---30-pix(on-white).png"/></td>
            <td width="33%" align="center"><img src="~/Images/PQ-Dashboard.png"/></td>
            <td width="34%" align="right" valign="top" nowrap><img src="~/Images/EPRI(c).jpg"/></td>
        </tr>
    </table>
</div>


<div id="ApplicationContent" class="noselect">
    <div id="headerStrip" class="headerStrip ui-state-default noselect">
        <table style="width: 100%;">
            <tr>
                <td width="250px" align="left" style="z-index: 999; padding-left: 5px;" nowrap>
                    Filter:
                    <select class="smallbutton" id="deviceFilterList" onchange="selectMeterGroup()">
                        <option value="0">All (no filter)</option>
                        @foreach (DeviceFilter df in deviceFilters)
                        {
                            <option value="@df.ID">@df.Name</option>
                        }
                    </select>
                    <button class="smallbutton" id="newDeviceFilterBtn" onclick="showDeviceFilter('new')">New</button>
                    <button class="smallbutton" id="editDeviceFilterBtn" onclick="showDeviceFilter('edit')">Edit</button>

                    <select class="smallbutton" id="Configurations" hidden="hidden"></select>
                </td>
                <td width="150px" align="left" nowrap>
                    <span id="meterSelected"></span> of <span id="meterCount">@meterCount</span> devices
                </td>

                <td width="auto" align="center" nowrap>
                    <div class="row" style="width:350px">
                        <div class="col-md-2">
                            <button type="button" class="btn btn-default" onclick="moveDateBackward()" title="Move 1 step back in time"><span class="glyphicon glyphicon-backward"></span></button>
                        </div>
                        <div class="col-md-8">
                        
                            <div id="dateRange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 215px">

                                <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
                                <span id="dateRangeSpan"></span> <b class="caret"></b>

                            </div>
                        </div>
                        <div class="col-md-2">
                            <button type="button" class="btn btn-default" onclick="moveDateForward()" title="Move 1 step forward in time"><span class="glyphicon glyphicon-forward"></span></button>
                        </div>

                    </div>


                </td>
                <td width="150px" align="center" style="z-index: 999; padding-right: 0px;" nowrap>
                    <a class="btn btn-default" href="@Url.Action("QuickSearch")" target="_blank">Quick Search</a>
                </td>

                <td width="100px" align="right" style="z-index: 999; padding-right: 20px;" nowrap>
                    <span>@ViewBag.username</span>
                </td>
                <td width="250px" align="right" style="z-index: 999; padding-right: 5px;" nowrap>
                    @*Monitor Group:*@
                    <select id="meterGroupSelect" class="smallbutton" onchange="selectMeterGroup(this);" hidden="hidden">
                        @foreach (MeterGroup mg in meterGroups)
                        {
                            <option value="@mg.ID">@mg.Name</option>
                        }
                    </select>
                    Views:
                    <select id="viewSelect" class="smallbutton" onchange="selectView(this)">
                        @foreach (SavedViews sv in savedViews)
                        {
                            <option value="@sv.ID">@sv.Name</option>
                        }

                    </select>
                    <button class="smallbutton" id="saveNewView" onclick="saveView()">Save</button>
                    <button class="smallbutton" id="deleteView" onclick="deleteView()">Delete</button>

                </td>
                @if (ViewBag.username != "External")
                {
                    <td width="35px" align="right" style="z-index: 999; padding-right: 5px;" >
                        <button type="button" title="View page settings" data-toggle="modal" data-target="#settingsModal"><span class="glyphicon glyphicon-cog"></span></button>
                    </td>
                }

            </tr>
        </table>
    </div>

    <div id="application-tabs" class="noselect">
        <ul>
            <li id="tabsMeterActivity"><a href="#tabs-MeterActivity">MeterActivity</a></li>
            <li id="tabsOverviewToday"><a href="#tabs-Overview-Today">Overview-Today</a></li>
            <li id="tabsOverviewYesterday"><a href="#tabs-Overview-Yesterday">Overview-Yesterday</a></li>
            <li id="tabsEvents"><a href="#tabs-Events">Events</a></li>
            <li id="tabsDisturbances"><a href="#tabs-Disturbances">Disturbances</a></li>
            <li id="tabsFaults"><a href="#tabs-Faults">Faults</a></li>
            <li id="tabsBreakers"><a href="#tabs-Breakers">Breakers</a></li>
            <li id="tabsExtensions"><a href="#tabs-Extensions">Extensions</a></li>
            <li id="tabsTrending"><a href="#tabs-Trending">Trending</a></li>
            <li id="tabsTrendingData"><a href="#tabs-TrendingData">TrendingData</a></li>
            <li id="tabsCompleteness"><a href="#tabs-Completeness">Completeness</a></li>
            <li id="tabsCorrectness"><a href="#tabs-Correctness">Correctness</a></li>
            <li id="tabsModbusData"><a href="#tabs-ModbusData">ModbusData</a></li>
            <li id="tabsHistorianData"><a href="#tabs-HistorianData">HistorianData</a></li>
        </ul>

        <div id="tabs-MeterActivity" style="background-color: #064e1b; width: 100%; height: 100%">
            <div id="meterActivityContainer" class="container" style="width: 100%; height: 100%; text-align: center">
                <div style="height: 1px; width: 80%; display: inline-block; background-color: black"></div>
                <div class="grid2" id="grid2MeterActivity">
                    <div class="grid2-sizer"></div>
                    <div class="grid2-item-wide" id="grid2-item-Today-3" style="top: 0;">
                        <div style="background-color: white; border-color: black; color: black; text-align: left; margin-bottom: 0px" class="well well-sm">
                            <h3 style="display:inline">METER ACTIVITY</h3>
                            <span style="float: right; color: silver">Click on event count to view events</span>
                            <div style="height: 2px; width: 100%; display: inline-block; background-color: black"></div>
                            <div id="meter-activity" style="background-color: white; border-color: black"></div>
                        </div>
                    </div>
                    <div class="grid2-item-wide" id="grid2-item-today-5" style="top: 0;">
                        <div style="background-color: white; border-color: black; color:black; text-align: left; margin-bottom: 0px" class="well well-sm">
                            <h3 style="display:inline">FILES PROCESSED LAST 24 HOURS</h3>
                            <span style="float: right; color: silver" id="files-hint">Expand row to view events</span>
                            <div style="height: 2px; width:100%; display: inline-block; background-color: black"></div>
                            <div id="meter-activity-files" style="background-color: white; border-color: black"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="tabs-Overview-Today" style="background-color: #064e1b; width: 100%; height: 100%">
            <div id="overviewContainer" class="container" style="width: 100%; height: 100%; text-align: center">
                <div style="height: 1px; width: 80%; display: inline-block; background-color: black"></div>
                <div class="grid2" id="grid2Today">
                    <div class="grid2-sizer"></div>
                    <div class="grid2-item" id="grid2-item-Today-1" style="left: 0px; top: 0px" hidden="hidden">
                        <div style="background-color:#f2f3fc; border-color: black; color: darkblue; text-align: left; margin-bottom: 0px" class="well well-sm">
                            <h3>DOWNLOADS</h3>
                            <div style="height: 2px; width: 100%; display: inline-block; background-color: darkblue"></div>
                            <div id="today-downloads" style="background-color: #f2f3fc; border-color: black"></div>
                        </div>
                    </div>
                    <div class="grid2-item" id="grid2-item-Today-2" style="top: 0px" hidden="hidden">
                        <div style="background-color: #ffeae9; border-color: black; color:#640701; text-align: left; margin-bottom: 0px" class="well well-sm">
                            <h3>FAULTS</h3>
                            <div style="height: 2px; width: 100%; display: inline-block; background-color: #640701"></div>
                            <div id="today-faults" style="background-color: #ffeae9; border-color: black"></div>
                        </div>
                    </div>
                    <div class="grid2-item-wide" id="grid2-item-Today-3" style="top: 0;">
                        <div style="background-color: white; border-color: black; color: black; text-align: left; margin-bottom: 0px" class="well well-sm">
                            <h3 style="display:inline">METER ACTIVITY</h3>
                            <span style="float: right; color: silver">Click on event count to view events</span>
                            <div style="height: 2px; width: 100%; display: inline-block; background-color: black"></div>
                            <div id="today-meter-activity" style="background-color: white; border-color: black"></div>
                        </div>
                    </div>
                    @*<div class="grid2-item-wide" id="grid2-item-Today-3" style="top: 0;" hidden="hidden">
                        <div style="background-color: white; border-color: black; color: black; text-align: left; margin-bottom: 0px" class="well well-sm">
                            <h3 style="display:inline">EVENT LOG</h3>
                            <span style="float: right; color: silver">Click on time to display waveform</span>
                            <div style="height: 2px; width: 100%; display: inline-block; background-color: black"></div>
                            <div id="today-log" style="background-color: white; border-color: black"></div>
                        </div>
                    </div>*@
                    <div class="grid2-item-wide" id="grid2-item-today-5" style="top: 0;">
                        <div style="background-color: white; border-color: black; color:black; text-align: left; margin-bottom: 0px" class="well well-sm">
                            <h3 style="display:inline">FILES PROCESSED LAST 24 HOURS</h3>
                            <span style="float: right; color: silver" id="files-hint">Expand row to view events</span>
                            <div style="height: 2px; width:100%; display: inline-block; background-color: black"></div>
                            <div id="today-files" style="background-color: white; border-color: black"></div>
                        </div>
                    </div>
                    <div class="grid2-item-large" id="grid2-item-Today-4" style="left: 0px; top:50%;" hidden="hidden">
                        <div style="background-color: #feeedb; border-color: black; color: #834a05; text-align: left; margin-bottom: 0px; height:100%; width: 100%" class="well well-sm">
                            <h3>VOLTAGE DISTURBANCES</h3>
                            <div style="height: 2px; width: 100%; display: inline-block; background-color: #834a05"></div>
                            <div id="today-voltages" style="background-color: #f1e5da; border-color: black"></div>
                            <div id="today-voltages-chart" style="background-color: #f1e5da; border-color: black; height: 300px"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="tabs-Overview-Yesterday" style="background-color: #d6dedb; width: 100%; height: 100%">
            <div id="overviewContainer" class="container" style="width: 100%; height: 100%; text-align: center">
                <div style="text-align: center; color: white">
                    <h3>PQ Overview for <span id="overviewYesterdayDate"></span> - YESTERDAY </h3>
                </div>
                <div style="height: 1px; width: 80%; display: inline-block; background-color: black"></div>

                <div class="grid2" id="grid2Yesterday">
                    <div class="grid2-sizer"></div>
                    <div class="grid2-item" id="grid2-item-Yesterday-1" style="left: 0px; top: 0px">
                        <h5> DOWNLOADS </h5>
                        <div class="well well-sm" style="background-color: white; border-color: black">
                            <div id="downloadsChart" style="width: 50%; height: 100%"></div>

                            <div id="history-downloads" style="width: 50%; height: 100%">

                            </div>
                        </div>
                    </div>

                    <div class="grid2-item" id="grid2-item-Yesterday-2" style="top: 0px">
                        <h5> ALARMS </h5>
                        <div class="well well-sm" style="background-color: white; border-color: black">
                            <div id="history-alarms"></div>
                        </div>
                    </div>

                    <div class="grid2-item" id="grid2-item-Yesterday-3" style="top: 0px">
                        <h5> OFF-NORMAL </h5>
                        <div class="well well-sm" style="background-color: white; border-color: black">
                            <div id="history-offnormal"></div>
                        </div>
                    </div>

                    <div class="grid2-item grid2-item-tall" id="grid2-item-Yesterday-4" style="height: 625px; top: 0">
                        <h5> PREVIOUS 30 DAYS </h5>
                        <div class="well well-sm" style="background-color: white; border-color: black; overflow-y: scroll; height:90%; width: 100%">
                            <div id="history-thirtyday-a" style="height:25%"></div>
                            <div id="history-thirtyday-offnormal" style="background-color: white; height:25%"></div>
                            <div id="history-thirtyday-disturbances" style="background-color: white; height:25%"></div>
                            <div id="history-thirtyday-faults" style="background-color: white; height:25%"></div>
                        </div>
                    </div>

                    <div class="grid2-item-wide" id="grid2-item-Yesterday-5" style="left: 0px; top:70%">
                        <h5> VOLTAGE DISTURBANCES </h5>
                        <div class="well well-sm" style="background-color: white; border-color: black">
                            <div id="history-voltages"></div>
                            <div id="history-voltages-chart" style="background-color: #f1e5da; border-color: black; height: 300px"></div>
                        </div>
                    </div>

                    <div class="grid2-item" id="grid2-item-Yesterday-6" style="top:70%">
                        <h5> FAULTS </h5>
                        <div class="well well-sm" style="background-color: white; border-color: black">
                            <div id="history-faults"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="tabs-ModbusData">
            <iframe id="modbusFrame"></iframe>
        </div>

        <div id="tabs-HistorianData">
            <iframe id="historianFrame"></iframe>
        </div>

        <div id="tabs-TrendingData">
            <div id="column_5" class="column resizeable">
                <div class="portlet" id="Portlet1TrendingData">
                    <div class="portlet-header">
                        <div class="portlet-header-text" style="display: inline">Trending Data Overview (Past 30 Days)</div>
                    </div>
                    <div id="DockOverviewTrendingData" class="portlet-content theDockOverviewStyle">
                        <div id="OverviewTrendingData" class="docklet">
                        </div>
                    </div>
                </div>
                <div class="portlet" id="Portlet2TrendingData">
                    <div class="portlet-header">
                        <div class="portlet-header-text" style="display: inline">
                            Trending Data Detail for
                            <div style="display: inline;" id="trendingDataDetailHeader">Date</div>
                            &nbsp;(24 Hours)
                        </div>
                    </div>
                    <div id="DockDetailTrendingData" class="portlet-content theDockDetailStyle">
                        <div id="DetailTrendingData" class="docklet">
                            <div id="DetailTrendingDataTable"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="column_6" class="column">
                <div class="portlet">
                    <div class="portlet-header portlet-header-text">
                        <div class="header-container">
                            <div class="siteselectdropdown" style="position: absolute;">
                                <select class="smallbutton mapGrid" id="mapTrendingDataGrid" onchange="selectmapgrid(this);">
                                    <option value="Map">Map</option>
                                    <option value="Grid">Grid</option>
                                </select>
                                <select class="smallbutton" id="selectSiteSetTrendingData" onchange="showSiteSet(this);">
                                    <option value="All">All Sites</option>
                                    <option value="RecievedData">Recieved Data</option>
                                    <option value="NoData">No Data</option>
                                    <option value="SelectedSites">Selected Sites</option>
                                    <option value="None">None</option>
                                </select>
                                <select class="smallbutton" id="trendingDataTypeSelection" onchange="showType(this);">
                                    <option value="Average">Average</option>
                                    <option value="Maximum">Maximum</option>
                                    <option value="Minimum">Minimum</option>
                                </select>
                                <select class="smallbutton" id="contourColorScaleSelect" onchange="showColorScale(this);">
                                </select>
                            </div>
                            <div class="overlaydate pull-right">
                                <div id="mapHeaderTrendingDataFrom" class="mapheader noselect"></div>
                                <div id="mapHeaderTrendingDataDivider" class="mapheader noselect">&nbsp;-&nbsp;</div>
                                <div id="mapHeaderTrendingDataTo" class="mapheader noselect"></div>
                            </div>


                        </div>
                    </div>
                    <div id="MapMatrixTrendingData" class="portlet-content portlet-header-text">
                        <div class="theMapStyle" id="theMapTrendingData">
                        </div>
                        <div class="theMatrixStyle noselect" id="theMatrixTrendingData"></div>
                    </div>
                </div>
            </div>
        </div>

        @foreach (string tab in tabs)
        {
            <div id="tabs-@(tab)">
                <div id="column_1" class="column resizeable">
                    <div class="portlet" id="Portlet1@(tab)">
                        <div class="portlet-header">
                            <div class="portlet-header-text" style="display: inline">@(tab) Overview (<span class="contextWindow"></span>)</div>
                            @if (tab == "Disturbances")
                            {
                                <select class="smallbutton pull-right" style="margin-right: 20px" onchange="showMagDur(this)">
                                    <option value="0">Bar Chart</option>
                                    <option value="1">Mag/Dur Chart</option>
                                </select>
                            }
                        </div>
                        <div id="DockOverview@(tab)" class="portlet-content theDockOverviewStyle">
                            <div id="Overview@(tab)" style="height: auto" class="docklet chart-container"></div>
                            <div id="Overview@(tab)Overview" style="height: 100px; bottom: 0" class="docklet chart-container"></div>
                            @if (tab == "Disturbances")
                            {
                                <div id="OverviewDisturbancesMagDur" class="docklet chart-container" style="display: none"></div>
                            }
                        </div>
                    </div>
                    <div class="portlet" id="Portlet2@(tab)">
                        <div class="portlet-header">
                            <div class="portlet-header-text" style="display: inline">
                                @tab Detail for <span class="contextWindow"></span>
                            </div>
                            @if (tab == "Faults")
                            {
                                <button class="btn btn-xs btn-default pull-right" style="margin-right: 20px" onclick="openFaultDetailsByDateXDAPage()">View in OpenXDA</button>
                            }
                        </div>
                        <div id="DockDetail@(tab)" class="portlet-content noselect theDockDetailStyle">
                            <div id="Detail@(tab)" class="docklet">
                                <div id="Detail@(tab)Table"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="column_2" class="column">
                    <div class="portlet">
                        <div class="portlet-header portlet-header-text">
                            <div class="header-container">
                                <div class="siteselectdropdown" style="position: absolute;">
                                    <select class="smallbutton mapGrid" id="map@(tab)Grid" onchange="selectmapgrid(this);">
                                        <option value="Map">Map</option>
                                        <option value="Grid">Grid</option>
                                    </select>
                                    <select class="smallbutton" id="selectSiteSet@(tab)" onchange="showSiteSet(this);">
                                        <option value="All">All Sites</option>
                                        <option value="Events">@(tab == "Events" ? "" : tab.Trim('s') + " ")Events</option>
                                        <option value="NoEvents">No @(tab == "Events" ? "" : tab.Trim('s') + " ")Events</option>
                                        <option value="SelectedSites">Selected Sites</option>
                                        <option value="None">None</option>
                                    </select>
                                    @if (tab == "Events")
                                    {
                                    <select class="smallbutton" id="selectHeatmap@(tab)" onchange="showHeatmap(this);">
                                        <option value="EventCounts">Event Counts</option>
                                        <option value="MinimumSags">Sag Minimum</option>
                                        <option value="MaximumSwell">Swell Maximum</option>
                                    </select>
                                    }
                                </div>

                                <div class="overlaydate pull-right">
                                    <div id="mapHeader@(tab)From" class="mapheader"></div>
                                    <div id="mapHeader@(tab)Divider" class="mapheader">&nbsp;-&nbsp;</div>
                                    <div id="mapHeader@(tab)To" class="mapheader"></div>
                                </div>

                            </div>

                        </div>

                        <div id="MapMatrix@(tab)" class="portlet-content portlet-header-text">
                            <div class="theMapStyle" id="theMap@(tab)"></div>
                            <div class="theMatrixStyle noselect" id="theMatrix@(tab)"></div>
                        </div>
                    </div>
                </div>
            </div>
        }
    </div>

</div>


@Html.Partial("Settings")

<div id="notesModal" class="modal fade" role="dialog">
    <div class="modal-dialog" style="width: 50%">

        <!-- Modal content-->
        <div class="modal-content" >
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Add a note to record <span id="faultId"></span></h4>
            </div>
            <div id="previousNotesDiv">
                
            </div>
            <div class="modal-body">
                <textarea id="note" class="form-control"></textarea>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" onclick="saveNote()">Save</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

<div id="deviceFilterModal" class="modal fade" role="dialog">
    <div class="modal-dialog" style="width: 50%">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Add/Edit a device filter.</h4>
            </div>
            <div class="modal-body">
                <div id="deviceFilterId" hidden="hidden"></div>
                <label for="deviceFilterName">Name:</label>
                <input type="text" class="form-control" id="deviceFilterName"/>
                <label for="deviceFilterMeterGroup">Meter Group:</label>
                <select class="form-control" id="deviceFilterMeterGroup">
                    <option value="0">Union of All Groups</option>
                    @foreach (MeterGroup mg in meterGroups)
                    {
                        <option value="@mg.ID">@mg.Name</option>
                    }

                </select>
                <label for="filterExpression">Filter Expression:</label><button class="btn btn-xs btn-default" id="filterExpressionHelp"><span class="glyphicon glyphicon-asterisk"></span></button>
                <textarea id="filterExpression" class="form-control"></textarea>
            </div>
            <div class="modal-footer">
                <button id="showDeviceFilterPreviewBtn" type="button" class="btn btn-default pull-left" onclick="previewDeviceFilter()">Preview</button>
                <button id="showDeviceFilterPreviewBtn" type="button" class="btn btn-default pull-left" onclick="useSelectedMeters()">Use Selected Meters</button>
                <button id="showDeviceFilterSaveBtn" type="button" class="btn btn-primary" data-dismiss="modal" onclick="saveDeviceFilter('new')">Save</button>
                <button id="showDeviceFilterEditBtn" type="button" class="btn btn-primary" data-dismiss="modal" styple="display: none" onclick="saveDeviceFilter('edit')">Save</button>
                <button id="showDeviceFilterDeleteBtn" type="button" class="btn btn-danger" data-dismiss="modal" styple="display: none" onclick="saveDeviceFilter('delete')">Delete</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script>
    const DateTimeFormat = '@Model.Global.DateTimeFormat'
    //////////////////////////////////////////////////////////////////////////////////////////////////////////
    // The following function are for making button links to another page and opening another page
    function filterMakeFaultSpecificsButton_html(id) {
        var return_html = "";
        if (id.eventtype == "Fault") {
            return_html = makeFaultSpecificsButton_html(id);
        }
        return (return_html);
    }

    function makeFaultSpecificsButton_html(id) {
        var return_html = "";
        return_html += '<div style="width: 100%; Height: 100%; text-align: center; margin: auto; border: 0 none;">';
        return_html += '<button onClick="OpenWindowToFaultSpecifics(' + id.theeventid + ');" value="" style="cursor: pointer; text-align: center; margin: auto; border: 0 none;" title="Open Fault Detail Window">';
        return_html += '<img src="@Html.Raw(Url.Content("~/Images/faultDetailButton.png"))" /></button></div>';
        return (return_html);
    }

    function OpenWindowToFaultSpecifics(id) {
        var datarow = id;
        var popup = window.open("@Html.Raw(Url.Content("~/FaultSpecifics.aspx"))?eventid=" + id, id + "FaultLocation", "left=0,top=0,width=300,height=200,status=no,resizable=yes,scrollbars=yes,toolbar=no,menubar=no,location=no");
        return false;
    }

    function makeOpenSEEButton_html(id) {
        var return_html = "";
        return_html += '<div style="cursor: pointer; width: 100%; Height: 100%; text-align: center; margin: auto; border: 0 none;">';
        return_html += '<button onClick="OpenWindowToOpenSEE(' + id.theeventid + ',' + id.breakeroperationid + ');" value="" style="cursor: pointer; text-align: center; margin: auto; border: 0 none;" title="Launch OpenSEE Waveform Viewer">';
        return_html += '<img src="@Html.Raw(Url.Content("~/Images/seeButton.png"))" /></button></div>';
        return (return_html);
    }

    function makeOpenSTEButton_html(id) {
        var return_html = "";
        var url = "'@Html.Raw(Url.Content("~/Main/openSTE"))?channelid=" + encodeURIComponent(id.channelid)
            + "&date=" + encodeURIComponent(id.date)
            + "&meterid=" + encodeURIComponent(id.meterid)
            + "&measurementtype=" + encodeURIComponent(id.measurementtype)
            + "&characteristic=" + encodeURIComponent(id.characteristic)
            + "&phasename=" + encodeURIComponent(id.phasename) + "'";
        return_html += '<div style="cursor: pointer; width: 100%; Height: 100%; text-align: center; margin: auto; border: 0 none;">';
        return_html += '<button onclick="OpenWindowToOpenSTE( ' + url + ',' + id.channelid + ' )" value="" style="cursor: pointer; text-align: center; margin: auto; border: 0 none;" title="Launch OpenSTE Trending Viewer">';
        return_html += '<img src="@Html.Raw(Url.Content("~/Images/steButton.png"))" /></button></div>';
        return (return_html);
    }

    function OpenWindowToOpenSTE(url, id) {
        var popup = window.open(url, id + "openSTE");
        return false;
    }


    function OpenWindowToOpenSEE(id, breaker) {
        var url = "@Html.Raw(Url.Content("~/Main/OpenSEE"))?eventid=" + id;

        if (currentTab === "Breakers")
            url += "&breakeroperation=" + breaker + "&breakerdigitals=1";
        else
            url += "&faultcurves=1";

        var popup = window.open(url, id + "openSEE");
        return false;
    }

    function makeChannelDataQualityButton_html(id) {
        var return_html = "";
        return_html += '<div style="cursor: pointer; width: 100%; Height: 100%; text-align: center; margin: auto; border: 0 none;">';
        return_html += '<button onClick="OpenWindowToChannelDataQuality(' + id.theeventid + ');" value="" style="cursor: pointer; text-align: center; margin: auto; border: 0 none;" title="Launch Channel Data Quality Details Page">';
        return_html += '<img src="@Html.Raw(Url.Content("~/Images/dqDetailButton.png"))" /></button></div>';
        return (return_html);
    }

    function makeChannelCompletenessButton_html(id) {
        var return_html = "";
        return_html += '<div style="cursor: pointer; width: 100%; Height: 100%; text-align: center; margin: auto; border: 0 none;">';
        return_html += '<button onClick="OpenWindowToChannelDataCompleteness(' + id.theeventid + ');" value="" style="cursor: pointer; text-align: center; margin: auto; border: 0 none;" title="Launch Channel Data Quality Details Page">';
        return_html += '<img src="@Html.Raw(Url.Content("~/Images/dcDetailButton.png"))" /></button></div>';
        return (return_html);
    }

    function makeMeterEventsByLineButton_html(id) {
        var return_html = "";
        return_html += '<div style="cursor: pointer; width: 100%; Height: 100%; text-align: center; margin: auto; border: 0 none;">';
        return_html += '<button onClick="OpenWindowToMeterEventsByLine(' + id.theeventid + ');" value="" style="cursor: pointer; text-align: center; margin: auto; border: 0 none;" title="Launch Events List Page">';
        return_html += '<img src="@Html.Raw(Url.Content("~/Images/eventDetailButton.png"))" /></button></div>';
        return (return_html);
    }

    function OpenWindowToMeterEventsByLine(id) {
        var popup = window.open("@Html.Raw(Url.Content("~/Main/MeterEventsByLine"))?eventid=" + id + "&context="+globalContext, id + "MeterEventsByLine");
        return false;
    }

    function OpenWindowToMeterEventsByLineTwo(id, context, sourcedate) {
        var popup = window.open("@Html.Raw(Url.Content("~/Main/MeterEventsByLine"))?eventid=" + id + "&context="+context +"&posteddate="+sourcedate, id + "MeterEventsByLine");
        return false;
    }

    function OpenWindowToMeterDisturbancesByLine(id) {
        var popup = window.open("@Html.Raw(Url.Content("~/Main/MeterDisturbancesByLine"))?eventid=" + id + "&context="+globalContext, id + "MeterDisturbancesByLine");
        return false;
    }

    function OpenWindowToMeterExtensionsByLine(id) {
        var popup = window.open("@Html.Raw(Url.Content("~/Main/MeterExtensionsByLine"))?eventid=" + id + "&context="+globalContext, id + "MeterEventsByLine");
        return false;
    }


    function OpenWindowToChannelDataQuality(id) {
        var popup = window.open("@Html.Raw(Url.Content("~/ChannelDataQuality.aspx"))?eventid=" + id, id + "ChannelDataQuality");
        return false;
    }

    function OpenWindowToChannelDataCompleteness(id) {
        var popup = window.open("@Html.Raw(Url.Content("~/ChannelDataCompleteness.aspx"))?eventid=" + id, id + "ChannelDataCompleteness");
        return false;
    }

    function openFaultDetailsByDateXDAPage(){
        if(contextfromdate == contexttodate){
            window.open(xdaInstance + "/Workbench/FaultsDetailsByDate.cshtml?MeterIds=" + GetCurrentlySelectedSitesIDs() + "&Date=" + contexttodate + "&context=" + globalContext)
        }
    }

    </script>

</body>

</html>
